<template>
  <div class="login">
    <!-- 登录表单 -->
    <el-form
      :model="loginFrom"
      status-icon
      :rules="rules"
      ref="loginFrom"
      label-width="100px"
      class="demo-ruleFrom"
    >
      <!-- 输入账号 -->
      <el-form-item label="账号" prop="username">
        <el-input
          type="text"
          v-model="loginFrom.username"
          autocomplete="off"
          placeholder="账号"
          clearable
        ></el-input>
      </el-form-item>
      <!-- 输入密码 -->
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="loginFrom.password"
          autocomplete="off"
          placeholder="密码"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {getUserLogin} from '../../request/api'
export default {
  data() {
    //   账号验证
    var validateusername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        callback();
      }
    };
    // 密码验证
    var validatepassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginFrom: {
        username: "", //账号
        password: "", //密码
      },
      //   验证规则
      rules: {
        username: [{ validator: validateusername, trigger: "blur" }],
        password: [{ validator: validatepassword, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 登录
    login(){
      getUserLogin(this.loginFrom).then(res=>{
        if(res.data.code==200){
          if(res.data.list.status==2) return this.$message.warning("该账号已被禁止使用")
          this.$message.success("登录成功")
          sessionStorage["userInfo_pc"]=res.data.list?JSON.stringify(res.data.list):[]
          setTimeout(() => {
            this.$router.push('/')
          }, 1000);
        }else{
          this.$message.warning(`${res.data.msg}`)
        }
      },err=>err)
    }
  },
};
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #563443, #2f3d60);
}
.el-form {
  position: absolute;
  padding: 60px 60px 50px 0px;
  left: 50%;
  top: 20%;
  transform: translate(-50%);
  background-color: #fff;
  border-radius: 10px;
}
.el-form-item {
  width: 500px;
}
.el-button {
  margin-top: 30px;
  width: 400px;
}
</style>